<template>
    <van-nav-bar title="商品评价" left-text="" left-arrow @click-left="goBack" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ info.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 订单商品 -->
            <div class="aui-commodity-bg">
                <div class="item">
                    <div class="aui-flex">
                        <div class="aui-commodity-img">
                            <img :src="info.product.thumbs_text" />
                        </div>
                        <div class="aui-flex-box">
                            <h4 class="van-ellipsis">商品名称：{{ info.product.name }}</h4>
                            <p>商品单价：￥{{ info.price }}</p>
                            <span class="aui-barter-time">七天退换</span>
                        </div>
                        <div>
                            <h5>￥{{ info.total }}</h5>
                            <p class="aui-sml-text">X{{ info.pronum }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品评价 -->
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field name="rate" label="评分" :rules="[{ required: true, message: '请选择评分' }]">
                        <template #input>
                            <van-rate v-model="rate" icon="fire" void-icon="fire-o" />
                        </template>
                    </van-field>
                    <van-field v-model="comment" rows="2" autosize label="评价内容" type="textarea" maxlength="120"
                        placeholder="请输入评价内容" show-word-limit />
                    <van-field name="avatar" label="评价图片">
                        <template #input>
                            <van-uploader v-model="avatarList" multiple :max-count="5" />
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="success" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>

        </section>
    </section>
</template>
<script setup>
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser'));
const goBack = () => {
    proxy.$router.go(-1)
}
const orderproid = ref(proxy.$route.query.orderproid ?? 0)
const info = ref({
    product: {}
})
const rate = ref(0)
const comment = ref('')
const avatarList = ref([]);
onBeforeMount(() => {
    getOrderInfoData()
})
const getOrderInfoData = async () => {
    let result = await Api.OrderRateinfo({
        busid: LoginUser.id,
        orderproid: orderproid.value
    })
    if (result.code == 1) {
        info.value = result.data
    }
}
const onSubmit = async () => {
    var RequestData = new FormData()
    RequestData.append('busid', LoginUser.id)
    RequestData.append('orderproid', orderproid.value)
    RequestData.append('rate', rate.value)
    RequestData.append('comment', comment.value)
    if (avatarList.value.length > 0) {
        avatarList.value.forEach((item) => {
            RequestData.append(orderproid.value + '[]', item.file)
        })
    }
    let result = await Api.OrderRate(RequestData)
    if (result.code == 1) {
        success({
            message: result.msg,
            onClose: () => {
                goBack()
            }
        });
    } else {
        error(result.msg);
    }
};
</script>
<style>
@import url('/assets/css/info.css');
</style>